<template>
    <div class="mainContent">
        <div class="left">
            <div class="title">数据字典类型</div>
            <p v-for="(item,index) in typeList" :key="index" :class="item.id == type?'active':''" @click="getType(item)">{{item.name}}</p>
        </div>
        <div class="right">
            <div class="down">
                <el-button type="primary" @click="updateRow(0)"  size="small" plain :disabled="!btnList.includes('mach/dict/add')">{{type == 1?'+维保项目':'+维保费用'}}</el-button>
            </div>
            <div class="table">
                <el-table :data="list" border :height="tableHeight" :key="tableKey" :header-cell-style="headClass" :stripe='true'>
                    <el-table-column fixed prop="name" label="名称" ></el-table-column>
                    <el-table-column fixed prop="remark" label="费用明细" v-if="type == 2"></el-table-column>
                    <el-table-column label="操作" align="center" v-if="btnList.includes('mach/dict/edit') || btnList.includes('mach/dict/del')">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="updateRow(1,scope.$index, list)" type="text" v-if="btnList.includes('mach/dict/edit')" size="small">编辑</el-button>
                            <el-button @click.native.prevent="remove(scope.$index, list)" type="text" size="small" v-if="btnList.includes('mach/dict/del')" style="color:red">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0;text-align: center;"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange">
                    </Page>
                </div>
            </div>
        </div>

        <Modal v-model="updateModal" :title="isAdd ? '添加维保项目' : '编辑维保项目' " width="500px" :mask-closable="false">
            <div slot="header">
                <div v-if="type == 1">
                    <span v-if="isAdd">添加维保项目</span>
                    <span v-if="!isAdd">编辑维保项目</span>
                </div>
                <div v-if="type == 2">
                    <span v-if="isAdd">添加维保费用</span>
                    <span v-if="!isAdd">编辑维保费用</span>
                </div>
            </div>
            <div class="item">
                <span class="tip">*</span>
                <span>名称:</span>
                <Input  v-model="name"  placeholder="请输入维保项目" style="width:350px;" v-if="type == 1"/>
                <Input  v-model="name"  placeholder="请输入维保费用" style="width:350px;" v-if="type == 2"/>
            </div>
            <div class="item" v-if="type == 2" style="align-items: flex-start">
                <span>明细:</span>
                <div style="width: 350px;">
                     <div v-for="(item,index) in remark" :key="index" style="width: 350px; display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
                         <Input  v-model="remark[index]"  placeholder="请输入维保明细" style="width:320px;" clearable />
                         <Icon type="ios-close-circle-outline" style="color: red;cursor: pointer" size="24" @click="removeRow(index)"/>
                     </div>
                     <Icon type="ios-add-circle-outline" v-if="remark.length <= 4" @click="addRemark" size="24" style="cursor: pointer"/>
                </div>
            </div>

            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitDate" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="delModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="del" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>

import {
    getMachDictDateList,getMachDictDateAdd,getMachDictDateEdit,getMachDictDateDel
} from '@/api/keep'

export default {
    data() {
        return {
            deptId: '',
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            list: [],
            tableHeight:window.innerHeight - 250,
            typeList:[
                {
                    id:1,
                    name:'维修保养项目'
                },
                {
                    id:2,
                    name:'维修保养费用'
                }
            ],
            type :1,
            updateModal:false,
            isAdd:true,
            payModal:false,
            delModal :false,
            name:"",
            dataId:"",
            btnList:[],
            tableKey:0,
            remark:[],
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.getDateList();
            }
        }
    },
    mounted() {
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getDateList();
    },
    methods: {
        addRemark(){
             let str ='';
             this.remark.push(str)
        },
        removeRow(index){
            this.remark.splice(index,1);
        },
        headClass(){
            return 'color: #1891ff;background:#E5ECFD;important;'
        },
        getType(item) {
            this.type = item.id;
            this.pageNum = 1;
            this.current = 1;
            ++this.tableKey;
            this.getDateList();
        },
        getDateList() {
            let params = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                dictCode:this.type == 1?'maintain_item':'maintain_pay',
            }
            getMachDictDateList(params).then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        pageChange(index){
            this.pageNum = index;
            this.getDateList()
        },
        pageSizeChange(index){
            this.pageSize = index;
            this.getDateList()
        },
        remove(index,rows){
            this.dataId = rows[index].id;
            this.delModal = true;
        },
        del(){
            getMachDictDateDel(this.dataId).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getDateList();
                    this.delModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        updateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.name = '';
                this.remark =[];
            } else if (type == 1) {
                this.isAdd =false;
                this.dataId = rows[index].id;
                this.name = rows[index].name;
                this.remark = rows[index].remark ?(rows[index].remark).split(',') : [];
            }
            this.updateModal = true;
        },
        submitDate(){
            if(this.name == ""){
                this.$Modal.warning({
                    title: "提示",
                    content: "请填写名称"
                });
                return;
            }
            let remark = '';
            if(this.type == 2) {
                if(this.remark.length == 0){
                    this.$Modal.warning({
                        title: "提示",
                        content: "请添加保养明细"
                    });
                    return;
                }
                if(this.remark.length>0) {
                    for(let i = 0; i<this.remark.length; i++) {
                        if(this.remark[i] == ""){
                            this.$Modal.warning({
                                title: "提示",
                                content: "请填写保养明细"
                            });
                            return;
                        }

                    }
                }
            }
            remark = this.remark.toString()
            if(this.isAdd) {
                let params = {
                    deptId: this.deptId,
                    name: this.name,
                    dictCode:this.type == 1?'maintain_item':'maintain_pay',
                    remark:this.type == 2?remark:"",
                }
                getMachDictDateAdd(params).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getDateList();
                        this.updateModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else {
                let params = {
                    id:this.dataId,
                    deptId: this.deptId,
                    name: this.name,
                    dictCode:this.type == 1?'maintain_item':'maintain_pay',
                    remark:this.type == 2?remark:"",
                }
                getMachDictDateEdit(params).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getDateList();
                        this.updateModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        cancel(type){
            if(type == 0) {
                this.updateModal =false;
            }else if(type == 2) {
                this.delModal =false;
            }
        },
    }
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    display: flex;
    .left {
        height: 100%;
        width: 300px;
        background: #fff;
        .title{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: var(--themeColor1);
            color: var(--themeColor);
            font-weight: 500;
        }
        p{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 30px;
            cursor:pointer;
            color: #666666;
        }
        .active{
                background: var(--themeColor);
                color: #fff;
        }
    }

    .right {
        flex: 1;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        margin-left: 10px;
        background: #fff;
        border-radius: 10px;
        .down{
            margin-bottom: 10px;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        /deep/ .el-table{
            thead th{
                background-color: #F1F8FF !important;
                color: #666666 !important;
                font-weight: 400;
            }
        }
    }
}
.item {
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 10px auto 20px;
    padding-left: 16px;
    box-sizing: border-box;

    .tip {
        position: absolute;
        top: 8px;
        left: 0;
        color: red;
        font-size: 16px;
    }
}
</style>
